import {RouteObject} from 'react-router-dom'
import {lazy, Suspense} from 'react'

const Home = lazy(() => import('../components/Home'))
const About = lazy(() => import('../components/About'))
const NotFound = lazy(() => import('../components/NotFound'))
const AuthorList = lazy(() => import('../components/AuthorList'))
const Layout = lazy(() => import('../components/Layout'))

let routes: RouteObject[] = [
  {
    path: '/',
    element: (
      <Suspense fallback={<div>layout loading...</div>}>
        <Layout />
      </Suspense>
    ),
    children: [
      {
        index: true,
        element: (
          <Suspense fallback={<div>Home loading...</div>}>
            <Home />
          </Suspense>
        ),
      },
      {
        path: 'about',
        element: (
          <Suspense fallback={<div>About loading...</div>}>
            <About />
          </Suspense>
        ),
        children: [
          {
            path: 'author',
            element: (
              <Suspense fallback={<div>Author loading...</div>}>
                <AuthorList />
              </Suspense>
            ),
          },
        ],
      },
      {
        path: '*',
        element: (
          <Suspense fallback={<div>Error loading...</div>}>
            <NotFound />
          </Suspense>
        ),
      },
    ],
  },
]

export default routes
